<template>
  <div class="photosChild-cotainer">

    <el-card class="card">
      <i class="el-icon-magic-stick"></i>
      <span>我们一起回忆童年</span>
    </el-card>

    <div class="img-content">
      <div class="img-box" v-for="(item,index) in photosChildlist" :key="index"  >
        <el-image
            lazy
            class="img"
            :src="item.childImg_url"
            >
        </el-image>
      </div>

    </div>
    <e-bottom></e-bottom>
  </div>
</template>

<script>
import bottom from "@/components/bottom";
export default {
  data () {
    return{
      photosChildlist: []
    }
  },
  created() {
    this.getChildImg()
  },
  methods: {
    async getChildImg () {
      const { data: res } = await this.$http.get('getphotosChild',{
        params:{
          child_route: this.$route.params.id
        }
      })
      this.photosChildlist = res.photosChildlist
    }
  },
  components: {
    eBottom: bottom
  }
}
</script>

<style lang="less" scoped>
.photosChild-cotainer{
  .card{
    width: 60%;
    height: 80px;
    margin: 20px auto;
    text-align: center;
    font-size: 2.4rem;
    color: #466C94;
    i{
      margin-right: 1.5%;
    }
  }
  .img-content{
    width: 80%;
    //background-color: red;
    margin: 30px auto;
      -moz-column-count:4; /* Firefox */
      -webkit-column-count:4; /* Safari 和 Chrome */
      column-count:4;
      -moz-column-gap: 10px;
      -webkit-column-gap: 10px;
      column-gap: 10px;

    .img-box{
      display: inline-block;
      margin: 5px auto;
      width: 98%;
      //width: 33%;
      padding: 5px;
      //margin: 5px;
      //height: auto;
      background-color: #fff;
      border-radius: 5px;
      .img{
        width: 100%;
      }

    }
  }
  @media (min-width: 992px) and (max-width: 1300px) {
    .card{
      width: 60%;
      font-size: 2.3rem;
      i{
      }
    }
    .img-content {
      column-count: 3;
    }

  }
  @media (min-width: 768px) and (max-width: 991px) {
    .card{
      width: 60%;
      font-size: 2.2rem;
      i{
      }
    }
    .img-content {
      column-count: 2;
    }

  }
  @media (max-width: 767px) {
    .card{
      width: 60%;
      font-size: 1.9rem;
      i{
      }
    }
    .img-content {
      column-count: 1;
    }
  }

}
</style>
